<template>
    <view>
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
            <view class="user-imge">
                <open-data type="userAvatarUrl"></open-data>
            </view>
            <text>请填写已有账号或新注册账号</text>

            <!-- #endif -->

            <!-- #ifdef H5 || APP-PLUS -->
            <view class="user-imge">
                <image src="/images/avatar.jpg"></image>
            </view>
            <text>请填写已有账号或新注册账号</text>
            <!-- #endif -->
        </view>
        <u--form labelPosition="left" :model="Form" :rules="rules" :errorType="errorType" ref="uForm">
            <u-form-item
                label="邮箱" prop="email" ref="item1"
            >
                <u--input v-model="Form.email" border="bottom" placeholder="请输入邮箱">
                </u--input>
            </u-form-item>

            <u-form-item label="密码" prop="password" ref="item1" :borderBottom="true">
                <u--input v-model="Form.password" placeholder="请输入密码" type="password" border="bottom">
                </u--input>
            </u-form-item>
        </u--form>
        <u-button type="primary" @click="submit">提交</u-button>
         <!-- 消息提示的组件 -->
        <u-toast ref="notice"></u-toast>
    </view>
</template>
<script>
export default {
    onReady()
    {
        this.$refs.uForm.setRules(this.rules)
    },
    data() {
        return {
            errorType:[''],
            rules:{
                email: [{
					type: 'string',
					required: true,
					message: '请填写邮箱',
					trigger: ['blur', 'change']
				}],
                password: [
                    {
					    type: 'string',
                        required: true,
                        message: '请输入密码',
                        // 可以单个或者同时写两个触发验证方式
                        trigger: ['blur','change']
                    }
                ]
            },
            Form:{
                email:'',
                password:''
            }
        }
    },
     methods: {
        submit()
        {
            this.$refs.uForm.validate().then(res => {
				// 调用uni.login
                uni.login({
                    provider:'weixin',
                    success:async (loginRes) => {
                        let code = loginRes.code

                        if(!code)
                        {
                            this.$refs.notice.show({
                                type:'error',
                                message:'授权失败',
                                icon:true
                            })
                            return false
                        }else{
                            this.Form.code = code
                        }

                        let result = await this.$u.api.user.bind(this.Form)

                        if(result.code === 1)
                        {
                            this.$refs.notice.show({
                                type:'success',
                                message:result.msg,
                                icon:true,
                                complete: () => {
                                    uni.setStorageSync('LoginUser',result.data)

                                    this.$u.route({
                                        url:'/pages/base/index',
                                        type:'switchTab'
                                    })
                                }
                            })
                        }else{
                            this.$refs.notice.show({
                                type:'error',
                                message:result.msg,
                                icon:true
                            })
                        }

                    }
                })
			}).catch(errors => {
                this.$refs.notice.show({
                    type:'error',
                    message:errors[0].message,
                    icon:true
                })
			})
        }
    },
}
</script>
<style>
.user{
    width: 100%;
    height: 450rpx;
    background: linear-gradient(rgb(1,115,222), rgb(78,169,245));
    padding-top: 40rpx;
}

.user-imge{
    width: 200rpx;
    height: 200rpx;
    background-color: greenyellow;
    border-radius: 50%;
    margin: 0 auto;
    overflow: hidden;
}

.user-imge image{
    width: 100%;
    height: 100%;
}

.user text{
    margin-top: 50rpx;
    display: block;
    text-align: center;
    color: #fff;
}

.u-button.data-v-3bf2dba7 
{
    width: 80% !important;
    margin-top: 10vh;
}
</style>